<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div>
          <span style="font-size: 16px; margin-right: 20px">
            {{ fromData?.distribute?.distributeName }}
          </span>
          <el-tag size="small" style="margin-right: 15px" type="warning">
            <span v-if="fromData?.monthlyCheckStatus === '-2'">已撤销</span>
            <span v-if="fromData?.monthlyCheckStatus === '-1'">审核未通过</span>
            <span v-if="fromData?.monthlyCheckStatus === '0'">审核中</span>
            <span v-if="fromData?.monthlyCheckStatus === '1'">有效</span>
          </el-tag>
          <el-tag v-if="fromData?.flowStatus ==='REJECT' || fromData?.flowStatus ==='REJECT_INITIATOR'" size="small"
                  style="margin-right: 15px" type="warning">
            [回退]
          </el-tag>
        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>
        <template v-if="fromData">
          <el-button v-auth="{v:['crm:returnedRecords:inventory:edite'],
          bool:fromData?.monthlyCheckStatus === '-1' || fromData?.monthlyCheckStatus === '-2' || 
          fromData?.flowStatus ==='REJECT' || fromData?.flowStatus ==='REJECT_INITIATOR' }" size="mini" type="primary"
                     @click="handlEditer">
            编辑
          </el-button>

          <el-button v-auth="{v:['crm:returnedRecords:inventory:delete'],
          bool:fromData?.monthlyCheckStatus === '-1' || fromData?.monthlyCheckStatus === '-2' || 
          fromData?.flowStatus ==='REJECT' || fromData?.flowStatus ==='REJECT_INITIATOR' }" size="mini" type="primary"
                     @click="handlDele">
            删除
          </el-button>
        </template>

      </template>
    </header-module>
    <div style="background-color: white;padding-top: 20px"/>
    <div class="main-content">
      <div class="list-container">
        <el-form :inline="true" class="filter-form-inline" label-position="left" size="small">
          <el-row :gutter="40">
            <el-col :lg="24">
              <item-title title="基本信息"/>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="配送商名称：">
                {{ fromData?.distribute?.distributeName }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="盘点日期：">
                {{ dateFormat("yyyy-mm-dd", fromData?.checkTime) }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="创建人：">
                {{ fromData?.creatorName }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="创建时间：">
                {{ dateFormat("yyyy-mm-dd HH:MM:SS", fromData?.createdAt) }}
              </el-form-item>
            </el-col>

            <el-col :lg="24">
              <item-title title="盘点产品明细"/>
            </el-col>
            <el-col :lg="24">
              <el-table :data="fromData?.checkProductDetails" border header-cell-class-name="table-header">
                <el-table-column align="center" label="序号" type="index" width="50"/>
                <el-table-column align="center" label="通用名" prop="product.productPopularName"/>
                <el-table-column align="center" label="商品名" prop="product.productName"/>
                <el-table-column align="center" label="生产厂家" prop="product.producer"/>
                <el-table-column align="center" label="批准文号" prop="product.approvalNumber"/>
                <el-table-column align="center" label="包装规格" prop="product.packSpecs"/>
                <el-table-column align="center" label="库存数量" prop="checkCount"/>
              </el-table>
            </el-col>
          </el-row>
        </el-form>

      </div>
    </div>
    <ruleForm ref="ruleFormRef" @succsess="succsess"/>
  </div>
</template>

<script>
import {defineAsyncComponent, getCurrentInstance, inject, onMounted, reactive, toRefs,} from "vue";
import {useRoute, useRouter} from "vue-router";

export default {
  name: "Inventory",
  components: {
    ruleForm: defineAsyncComponent(() => import("../modules/ruleForm.vue"))
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const api = inject("api");
    const currentInstance = getCurrentInstance();
    const data = reactive({
      fromData: {},
      ruleFormRef: null,
    });

    const handlBack = () => {
      router.go(-1);
    };

    const handlDetails = (id) => {
      api.inventory.INVENTORY_DETAILS(id).then((res) => {
        if (res.code === 0) {
          data.fromData = res.data;
        }
      });
    };

    const handlDele = () => {
      currentInstance.proxy
          .alertBox({
            message: "删除数据后不可恢复,确定删除？",
          })
          .then(() => {
            api.inventory
                .INVENTORY_DETELETE(Number(route.query.id))
                .then((res) => {
                  if (res.code === 0) {
                    handlBack();
                  } else {
                    currentInstance.proxy.customMessage({
                      type: "error",
                      message: res.msg,
                    });
                  }
                });
          })
          .catch((err) => {
            console.log(err);
          });
    };

    const handlEditer = () => {
      data.ruleFormRef.open(data.fromData);
    };

    const succsess = () => {
      handlDetails(route.query.id);
    };

    onMounted(() => {
      if (route.query.id) {
        handlDetails(route.query.id);
      }
    });

    return {
      ...toRefs(data),
      handlBack,
      handlDetails,
      handlDele,
      handlEditer,
      succsess,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
